import { Grid, theme } from "antd";
import type {
  Breakpoint,
  ScreenSizeMap,
  ScreenMap,
} from "antd/es/_util/responsiveObserver";

const { useBreakpoint } = Grid;

/**
 * 获取响应式信息
 * @returns
 */
export function useResponsive() {
  const {
    token: { screenXS, screenSM, screenMD, screenLG, screenXL, screenXXL },
  } = theme.useToken();
  const screenArray: Breakpoint[] = ["xs", "sm", "md", "lg", "xl", "xxl"];
  const screenEnum: ScreenSizeMap = {
    xs: screenXS, // 0
    sm: screenSM, // 576
    md: screenMD, // 768
    lg: screenLG, // 992
    xl: screenXL, // 1200
    xxl: screenXXL, // 1600
  };
  const screenMap: ScreenMap = useBreakpoint();
  const currentScreen = [...screenArray].reverse().find((screen) => {
    const result = screenMap[screen];
    return result === true;
  });
  return {
    screenEnum,
    screenMap,
    currentScreen,
  };
}
